
    <div class="container-fluid">
        <div class="row setjob">
            <div class="col-lg-3 sidebar-menu" id="job_man_menu">
                <ul class="nav nav-stacked">
                    <li>
                        <a href="javascript:setting();">
                            <span class="glyphicon glyphicon-wrench"></span> <span data-i18n="nav.job management"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="job_status">
                            <span class="glyphicon glyphicon-stats"></span> <span data-i18n="nav.job status"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="remove_job">
                            <span class="glyphicon glyphicon-trash"></span> <span data-i18n="nav.job delete"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class='col-lg-9 main-content'>
                <div id='jobsetting_content'>
                </div>
                <div id='jobstatus_content'></div>
                <div id='removejob_content' class="panel panel-danger">
                    <div class="panel-heading jobmanage" data-i18n="jobmanage.Danger Zone"></div>
                    <div class="panel-body">
                        <h4 class="jobmanage" data-i18n="jobmanage.Remove this Job"></h4></br>
                        <span class="jobmanage" data-i18n="jobmanage.Realy remove this Job? can't be restore!"></span>
                        <button class='btn btn-danger pull-right jobmanage' id='removejob' data-i18n="jobmanage.Remove Job"></button>
                    </div>
                </div>
            </div>
            <div id='job_editor_holder' style="display: none;"></div>
            <div id='encoder_conf_editor_holder' style="display: none;"></div>
        </div>
    </div>


    <script type="text/javascript">

    function setting_append_item (body, label, id, value) {
        var ele = document.createElement ("div");
        ele.setAttribute ("class", "row form-group col-md-12");
        ele.innerHTML = "<div class=\"col-lg-4\">" +
                        "<label class=\"pull-right jobmanage\" data-i18n=\"jobmanage." + label + "\"></label>" +
                        "</div>" +
                        "<div class=\"col-lg-7\">" +
                        "<input type=\"text\" class=\"form-control\" id=\"" + id + "\" placeholder=\"" + value + "\">" +
                        "</div>";
        body.appendChild (ele);
    }

    function setting_append_video_resolution (body) {
                var item = document.createElement ("div");
                item.setAttribute ("class", "row form-group col-md-12");
                item.innerHTML = "<div class=\"col-lg-4\">" +
                                 "<label class=\"pull-right jobmanage\" data-i18n=\"jobmanage.Video Resolution\"></label>" +
                                 "</div>" +
                                 "<div class=\"col-lg-7\">" +
                                 "<select class=\"form-control\" id=\"sourceresolution\">" +
                                 "<option>1920x1080</option>" +
                                 "<option>1280x720</option>" +
                                 "<option>720x576</option>" +
                                 "<option>720x480</option>" +
                                 "<option>640x320</option>" +
                                 "</select>" +
                                 "</div>";
                body.appendChild (item);
    }

    function setting () {
        $.get ("getjob/%s", function (data) {

            if (data.result == "failure") {
                alert (data.reason);
                return;
            }

            var job = data.data;

            $('#remove_job').attr ('href', "javascript:remove_job (\"" + job.name + "\")");
            $('#job_status').attr ('href', "javascript:status (\"" + job.name + "\")");

            $('#removejob_content').hide ();
            $("#jobstatus_content").hide ();
            $('#jobsetting_content').show ();

            var job_setting_element = document.createElement ("div"),
                job_setting_header = document.createElement ("div"),
                job_setting_body = document.createElement ("div");

            job_setting_element.setAttribute ("class", "panel panel-primary");
            job_setting_element.setAttribute ("id", "jobsetting");
            job_setting_header.setAttribute ("class", "panel-heading jobmanage");
            job_setting_header.setAttribute ("data-i18n", "jobmanage.Job Setting");
            job_setting_element.appendChild (job_setting_header);
            job_setting_body.setAttribute ("class", "panel-body");

            /* source */
            var source_title = document.createElement ("h3"),
                source_setting = document.createElement ("div");
            source_title.innerHTML = "Source";
            source_setting.setAttribute ("class", "well row pipeline-stat");
            if (job.type === "testsrc") {
                setting_append_video_resolution (source_setting);
            } else if (job.type === "networksrc") {
                setting_append_item (source_setting, "Source Uri", "sourceuri", job.source.elements.udpsrc.property.uri);
                setting_append_item (source_setting, "Program Number", "programnumber", job.source.elements.tsdemux.property["program-number"]);
            } else if (job.type === "v4l2src") {
                var width = job.source.elements.v4l2src.caps.replace(/[^\d]*(\d+),height=\d+/, "$1"),
                    height = job.source.elements.v4l2src.caps.replace(/[^\d]*\d+,height=(\d+)/, "$1");
                setting_append_item (source_setting, "Video Capture Width", "videocapturewidth", width);
                setting_append_item (source_setting, "Video Capture Height", "videocaptureheight", height);
            }
            job_setting_body.appendChild (source_title);
            job_setting_body.appendChild (source_setting);

            /* encoders */
            for (var i = 0, encoder; encoder = job.encoders[i]; i++) {
                var encoder_title = document.createElement ("h3"),
                    encoder_setting = document.createElement ("div");

                encoder_title.innerHTML = "Encoder." + i;
                encoder_setting.setAttribute ("class", "well row pipeline-stat");

                //setting_append_item (encoder_setting, "Video Resolution", "resolution", "videoresolution");
                setting_append_video_resolution (encoder_setting);
                setting_append_item (encoder_setting, "Video Bitrate", "videobitrate",  encoder.elements.x264enc.property.bitrate);
                job_setting_body.appendChild (encoder_title);
                job_setting_body.appendChild (encoder_setting);
            }
            var btn = document.createElement ("button");
            btn.setAttribute ("class", "btn btn-primary pull-right jobmanage");
            btn.setAttribute ("id", "savejob");
            btn.setAttribute ("data-i18n", "jobmanage.Save Job");
            job_setting_body.appendChild (btn);
            job_setting_element.appendChild (job_setting_body);

            $("#jobsetting_content").html (job_setting_element);
            $(".jobmanage").i18n ();

            $("#savejob").unbind ("click").click (function () {
                if (job.type === "v4l2src") {
                    var width = $("#videocapturewidth").val (),
                        height = $("#videocaptureheight").val ();
                    job.source.v4l2src.caps = "video/x-raw,width=" + widht + ",height=" + height;
                }

                for (var i = 0; i < job.encoders.length; i++) {
                    job.encoders[i].elements.x264enc.property.bitrate = $("#bitrate").val ();
                }

                $.post ("putjob/" + job.name, JSON.stringify (job, null, 4), function (data) {
                    if (data.result == 'success') {
                        alert (data.result);
                    } else {
                        alert (data.result + '\n' + data.reason);
                    }
                });
            });
        });
    }

    function status_append_item (body, key, value) {
        var key_ele = document.createElement ("div"),
            value_ele = document.createElement ("div");
        key_ele.setAttribute ("class", "col-lg-4");
        key_ele.innerHTML = "<label class=\"pull-right jobmanage\" data-i18n=\"jobmanage." + key + "\"></label>";
        value_ele.setAttribute ("class", "col-lg-7");
        value_ele.innerHTML = "<p>" + value + "</p>";
        body.appendChild (key_ele);
        body.appendChild (value_ele);
    }

    function status (name) {
        $.get("/stat/gstreamill/job/" + name, function (data) {
            if (data.result === 'failure') {
                alert (name + "'s stat not found.");
                return;
            }

            $('#removejob_content').hide ();
            $('#jobsetting_content').hide ();
            $("#jobstatus_content").show ();

            var job_stat_element = document.createElement ("div"),
                job_stat_header = document.createElement ("div"),
                job_stat_body = document.createElement ("div");

            job_stat_element.setAttribute ("class", "panel panel-primary");
            job_stat_element.setAttribute ("id", "jobstatus");
            job_stat_header.setAttribute ("class", "panel-heading jobmanage");
            job_stat_header.setAttribute ("data-i18n", "jobmanage.Job Status");
            job_stat_element.appendChild (job_stat_header);

            job_stat_body.setAttribute ("class", "panel-body");

            /* job status */
            status_append_item (job_stat_body, "Restart Times", data.data.age);
            status_append_item (job_stat_body, "Last Restart Time", data.data.last_start_time);
            status_append_item (job_stat_body, "Current Concurrent Count", data.data.current_access);
            status_append_item (job_stat_body, "Average CPU Usage", data.data.cpu_average);
            status_append_item (job_stat_body, "Current CPU Usage", data.data.cpu_current);
            status_append_item (job_stat_body, "Memory Usage", data.data.memory);

            /* source status */
            var source_title = document.createElement ("h3"),
                source_stat = document.createElement ("div");
            source_title.innerHTML = "Source";
            source_stat.setAttribute ("class", "well row pipeline-stat");
            var streams_table = "<span class=\"jobmanage\" data-i18n=\"jobmanage.Sync Error Times\"></span>: " +
                                    data.data.source.sync_error_times +
                                    "; <span class=\"jobmanage\" data-i18n=\"jobmanage.Streams Count\"></span>: " +
                                    data.data.source.stream_count +
                                    "<table class=\"table\">" +
                                    "<tr>" +
                                    "<th class=\"jobmanage\" data-i18n=\"jobmanage.Name\"></th>" +
                                    "<th class=\"jobmanage\" data-i18n=\"jobmanage.Last Time Stamps\"></th>" +
                                    "<th class=\"jobmanage\" data-i18n=\"jobmanage.Last Heartbeat Time\"></th>" +
                                    "</tr>";
            for (var i = 0; i < data.data.source.streams.length; i++) {
                var stream = data.data.source.streams[i];
                var tr = "<tr>" +
                         "<td>" + stream.name + "</td>" +
                         "<td>" + stream.timestamp + "</td>" +
                         "<td>" + stream.heartbeat + "</td>" +
                         "</tr>";
                streams_table += tr;
            }
            streams_table += "</table>";
            source_stat.innerHTML = streams_table;

            job_stat_body.appendChild (source_title);
            job_stat_body.appendChild (source_stat);

            /* encoders status */
            for (var i = 0; i < data.data.encoders.length; i++) {
                var encoder_title = document.createElement ("h3"),
                    encoder_stat = document.createElement ("div"),
                    encoder = data.data.encoders[i];
                encoder_title.innerHTML = encoder.name;
                encoder_stat.setAttribute ("class", "well row pipeline-stat");
                var streams_table = "<span class=\"jobmanage\" data-i18n=\"jobmanage.Output Heartbeat\"></span>: " +
                                    encoder.heartbeat +
                                    "; <span class=\"jobmanage\" data-i18n=\"jobmanage.Total Output Bytes\"></span>: " +
                                    encoder.count +
                                    "; <span class=\"jobmanage\" data-i18n=\"jobmanage.Streams Count\"></span>: " +
                                    encoder.streamcount +
                                    "<table class=\"table\">" +
                                    "<tr>" +
                                    "<th class=\"jobmanage\" data-i18n=\"jobmanage.Name\"></th>" +
                                    "<th class=\"jobmanage\" data-i18n=\"jobmanage.Last Time Stamps\"></th>" +
                                    "<th class=\"jobmanage\" data-i18n=\"jobmanage.Last Heartbeat Time\"></th>" +
                                    "</tr>";
                for (var j = 0; j < encoder.streams.length; j++) {
                    var stream = encoder.streams[j];
                    var tr = "<tr>" +
                             "<td>" + stream.name + "</td>" +
                             "<td>" + stream.timestamp + "</td>" +
                             "<td>" + stream.heartbeat + "</td>" +
                             "</tr>";
                    streams_table += tr;
                }
                encoder_stat.innerHTML = streams_table;

                job_stat_body.appendChild (encoder_title);
                job_stat_body.appendChild (encoder_stat);
            }

            job_stat_element.appendChild (job_stat_body);
            $("#jobstatus_content").html (job_stat_element);
            $(".jobmanage").i18n ();
        });
    }

    function remove_job (name) {
        $('#jobsetting_content').hide ();
        $("#jobstatus_content").hide ();
        $('#removejob_content').show ();
        $('#removejob').unbind ('click').click (function () {
            $.get("rmjob/" + name, function (response) {
                if (response.result === "success") {
                    alert (response.result);
                    window.location.replace("joblist.html");
                } else {
                    alert (response.result + "\nreason: " + response.reason);
                }
            });
        });
    }

    $ (document).ready (function () {
        $.get("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                alert ("get configure failure: " + data.reason);
                return;
            }

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".jobmanage").i18n ();
            });

            setting ();
        });

    });

    </script>
